<%--
  Created by IntelliJ IDEA.
  User: jasonmarslyon
  Date: 2022/11/1
  Time: 15:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>LinkedChat招聘网</title>
    <link href="${pageContext.request.contextPath}/public/static/images/login_icon.ico" rel="shortcut icon">
    <script src="${pageContext.request.contextPath}/public/static/js/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/public/static/css/chatmain.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/public/static/css/bootstrap.min.css">
</head>
<body>


<script>
  var toName;
  var username;
  function showChat(name) {
    toName = name;
    //现在聊天对话框
    $("#chatArea").css("display","inline");
    //请空聊天区
    $("#msgs").html("");

    //显示“正在和谁聊天”
    $("#chatMes").html("正在和 <font face=\"楷体\">"+toName+"</font> 聊天");
    //sessionStorage
    var chatData = sessionStorage.getItem(toName);
    if(chatData != null) {
      //将聊天记录渲染到聊天区
      $("#msgs").html(chatData);
    }
  }

  $(function() {
    $.ajax({
      url: "getUsername",
      success: function (res) {
        username = res;
        //显示在线信息
        $("#userName").html(" 用户：" + res + "<span style='float: right;color: green'>在线</span>");
      },
      async: false
    })

    //创建webSocket对象
    var ws = new WebSocket("ws://localhost/chat");
    //给ws绑定事件
    ws.onopen = function() {
      //在建立连接后需要做什么事？
      //显示在线信息
      $("#userName").html(" 用户：" + username + "<span style='float: right;color: green'>在线</span>");
    }

    //接收到服务端推送的消息后触发
    ws.onmessage = function(evt) {
      //获取服务端推送过来的消息
      var dataStr = evt.data;
      //将dataStr 转换为json对象
      var res = JSON.parse(dataStr);
      //判断是否是系统消息
      if(res.isSystem) {
        //系统消息
        var names = res.message;
        //1,好友列表展示
        //2,系统广播的展示
        var userlistStr = "";
        var broadcastListStr = "";

        for(var name of names) {
          if(name != username) {
            userlistStr += "<li class=\"rel-item\"><a onclick='showChat(\""+name+"\")'>"+name+"</a></li>";
            broadcastListStr += "<li class=\"rel-item\" style=\"color: #9d9d9d;font-family: 宋体\">您的好友 "+name+" 已上线</li>";
          }
        }
        //渲染好友列表和系统广播
        $("#userlist").html(userlistStr);
        $("#broadcastList").html(broadcastListStr);

      } else {
        //不是系统消息
        //将服务端推送的消息进行展示
        var str = "<div class=\"msg robot\"><div class=\"msg-left\" worker=\"\"><div class=\"msg-host photo\" style=\"background-image: url(img/avatar/Member002.jpg)\"></div><div class=\"msg-ball\">"+res.message+"</div></div></div>";
        if(toName == res.fromName) {
          $("#msgs").append(str);
        }
        var chatData = sessionStorage.getItem(res.fromName);
        if(chatData != null) {
          str = chatData + str;
        }
        sessionStorage.setItem(res.fromName,str);
      }
    }

    ws.onclose = function() {
      //显示离线信息
      $("#userName").html(" 用户：" + username + "<span style='float: right;color: red'>离线</span>");
    }

    $("#submit").click(function() {
      //获取输入的内容
      var data = $("#context_text").val();
      //清除输入区的内容
      $("#context_text").val("");

      var json = {"toName":toName,"message":data};

      //将数据展示在聊天区
      var str = "<div class=\"msg guest\"><div class=\"msg-right\"><div class=\"msg-host headDefault\"></div><div class=\"msg-ball\">"+data+"</div></div></div>";
      $("#msgs").append(str);

      var chatData = sessionStorage.getItem(toName);
      if(chatData != null) {
        str = chatData + str;
      }

      sessionStorage.setItem(toName,str)

      //发送数据给服务端
      ws.send(JSON.stringify(json));
    });
  })

</script>
</head>

<body>
<img style="width:100%;height:100%" src="img/chat_bg.jpg">

<div class="abs cover contaniner">
  <div class="abs cover pnl">
    <div class="top pnl-head" style="padding: 20px ; color: white;" >
      <div id="userName"> 用户：张三<span style='float: right;color: green'>在线</span></div>
      <div id="chatMes" style="text-align: center;color: #6fbdf3;font-family: 新宋体">
        <!--正在和 <font face="楷体">张三</font> 聊天-->
      </div>
    </div>
    <!--聊天区开始-->
    <div class="abs cover pnl-body" id="pnlBody" >
      <div class="abs cover pnl-left" id="initBackground" style="background-color: white; width: 100%">
        <div class="abs cover pnl-left" id="chatArea" style="display: none">
          <div class="abs cover pnl-msgs scroll" id="show">
            <div class="pnl-list" id="hists"><!-- 历史消息 --></div>
            <div class="pnl-list" id="msgs">

              <!-- 消息这展示区域 -->
              <!-- <div class="msg guest"><div class="msg-right"><div class="msg-host headDefault"></div><div class="msg-ball">你好</div></div></div>
               <div class="msg robot"><div class="msg-left" worker=""><div class="msg-host photo" style="background-image: url(img/avatar/Member002.jpg)"></div><div class="msg-ball">你好</div></div></div>-->
            </div>
          </div>

          <div class="abs bottom pnl-text">
            <div class="abs cover pnl-input">
              <textarea class="scroll" id="context_text" wrap="hard" placeholder="在此输入文字信息..."></textarea>
              <div class="abs atcom-pnl scroll hide" id="atcomPnl">
                <ul class="atcom" id="atcom"></ul>
              </div>
            </div>

            <div class="abs br pnl-btn" id="submit" style="background-color: rgb(32, 196, 202); color: rgb(255, 255, 255);">
              发送
            </div>
            <div class="pnl-support" id="copyright"><a href="http://www.itcast.cn">传智播客,版本所有</a></div>
          </div>
        </div>

        <!--聊天区 结束-->

        <div class="abs right pnl-right">
          <div class="slider-container hide"></div>
          <div class="pnl-right-content">
            <div class="pnl-tabs">
              <div class="tab-btn active" id="hot-tab">好友列表</div>
            </div>
            <div class="pnl-hot">
              <ul class="rel-list unselect" id="userlist">
                <!--<li class="rel-item"><a onclick='showChat("张三")'>张三</a></li>
                <li class="rel-item"><a onclick='showChat("李四")'>李四</a></li>-->
              </ul>
            </div>
          </div>

          <div class="pnl-right-content">
            <div class="pnl-tabs">
              <div class="tab-btn active">系统广播</div>
            </div>
            <div class="pnl-hot">
              <ul class="rel-list unselect" id="broadcastList">
                <!--<li class="rel-item" style="color: #9d9d9d;font-family: 宋体">您的好友 张三 已上线</li>
                <li class="rel-item" style="color: #9d9d9d;font-family: 宋体">您的好友 李四 已上线</li>-->
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</body>
</html>
